<template>
	<view class="index">
		<view class="index_title">
			<!-- 用户头像显示 -->
			<view class="user_pic">
               <view class="">
                 <view class="showHaderPic">
                 	<view class="header">
                 		<image src="../../static/harden3.jpg" mode=""></image>
                 	</view>
					    <image class="together" src="../../static/心.png" mode=""></image>
					<view class="header">
						<image :src="image||'../../static/增加(1).png'" mode=""></image>
					</view>
                 </view>
               </view>
			</view>
			<!-- 存钱计划显示 -->
			<view class="saveMoey_plan">
				<view>
					<text>存钱进度</text>
					<text>{{progress}}%</text>
				</view>
				<view>
					<text>总存钱计划</text>
					<text>{{avgMoney}}元</text>
				</view>
				<view>
					<text>已存钱</text>
					<text>{{hasMoney}}元</text>
				</view>
			</view>
		</view>
		<view class="SavingType">
			<SavingType/>
		</view>
		<view  class="SavingPlan">
			<SavingPlan/>
		</view>
	</view>
</template>

<script>
	import SavingType from './SavingType/SavingType.vue'
	import SavingPlan from './SavingPlan/SavingPlan.vue'
	import {getSaveDetailAPI} from '@/api/api.js'
	export default {
		components:{
			SavingType,
			SavingPlan
		},
		data() {
			return {
              image:'',
			  avgMoney:0,
			  hasMoney:0,
			}
		},
		computed:{
			progress(){
				return Math.ceil((this.hasMoney/this.avgMoney)*100)
			}
		},
		methods: {
			async getSaveDetail(){
						  const res=await getSaveDetailAPI()
						  res.data.forEach((item)=>{
							 this.avgMoney+=item.avgMoeny
							 this.hasMoney+=item.hasMoney
						  })
			}
		},
		onShow() {
			this.getSaveDetail()
		}
	}
</script>

<style scoped>
	.index {
		position: fixed;
		height: 100%;
		width: 100%;
		/* background: url('@/static/harden4.jpg') no-repeat; */
		/* background-size: cover; */
		background-color: pink;
	}

	.index_title {
		width: 650rpx;
		height: 260rpx;
		border: 1rpx solid white;
		border-radius: 40rpx;
		margin: 50rpx auto;
		display: flex;
		flex-direction: column;
	}
	.showHaderPic{
		width: 200rpx;
		height: 80rpx;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header{
		width: 80rpx;
		height: 80rpx;
		
	}
	.header>image{
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		border: 1px solid white;
	}
	.together{
		width: 50rpx;
		height: 50rpx;
	}
	.saveMoey_plan{
		flex: 1;
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
	}
	.saveMoey_plan>view{
		flex: 1;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		border: 5rpx solid yellowgreen;
		border-radius: 40rpx;
		margin-right: 10rpx;
		font-weight: bold;
		color: white;
	}
	.SavingType{
		width: 650rpx;
		height: 300rpx;
		margin: 0rpx auto;
		}
	.SavingPlan{
		width: 650rpx;
		margin: 20rpx auto;
	}
</style>
